<?php use_helper('I18N'); ?>
<style type="text/css">
    p img {
        background: none repeat scroll 0 0 white;
        border: 1px solid #BBBBBB;
        margin: 7px 14px 7px 0;
        padding: 5px;
        height: 50px;
        /*width: 160px;*/
    }
</style>
<script type="text/javascript">
$(function() {
    $("#btnBack").button({
        icons: {
            primary: "ui-icon-circle-arrow-w"
        }
    });
    $("#btnUpdate").button({
        icons: {
            primary: "ui-icon-circle-check"
        }
    }).click(function(){
        $("#frmAccountPassword").submit();
    });
});
</script>

<script type="text/javascript">
$(function() {
    var container = $('div.errorContainer');
    $("#frmAccountPassword").validate({
        errorLabelContainer: $("ol", container),
        errorContainer: $('div.errorContainer'),
        wrapper: 'li',
        meta: "validate",
        messages : {
            oldPassword: {
                required: "<?php echo __('%1% is required.', array('%1%' => 'Current Password')) ?>"
            },
            newPassword: {
                required: "<?php echo __('%1% is required.', array('%1%' => 'New Password')) ?>"
            },
            confirmPassword: {
                required: "<?php echo __('%1% is required.', array('%1%' => 'Confirm Password')) ?>"
                , equalTo: "<?php echo __('Please enter the same password as above') ?>"
            }
        },
        rules : {
            "oldPassword" : {
                required : true
            },
            "newPassword" : {
                required : true
            },
            "confirmPassword" : {
                required : true,
                equalTo: "#newPassword"
            }
        },
        submitHandler: function(form) {
            form.submit();
        }
    });
    $("#validate-close").click(function(){
        $(container).hide(500);
    });
});
</script>

<div style="z-index: 999; position: fixed; top:0px; right:0px;" class="errorContainer ui-state-error-validate ui-corner-all container ui-widget" id="validateContainer">
    <p>
        <span style="float: left; margin-right: .3em;" class="ui-red ui-icon ui-icon-alert"></span>
        <a href="#" id="validate-close" role="button" class="ui-dialog-titlebar-close ui-corner-all">
            <span style="position:absolute; right : -2px; margin-right: .3em; border: 1px solid #FBCB09; color: #C77405;" class="ui-icon ui-icon-closethick"></span>
        </a>
        <strong id='_msg'>
            <ol style="padding-top:0px;margin-top:0px;margin-bottom:0px"></ol>
        </strong>
    </p>
</div>

<div id="content">

    <!-- ========== CATEGORIES TABS ========= -->
    <!-- ==================================== -->
    <table id="contentMainWrapper" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody>
        <tr>
            <td id="column-left" style="width: 215px;">
                <div style="width:215px;">
                    <!--// bof: categories //-->
                    <div class="box" id="categories" style="width:215px;">
                        <div class="box-border">
                            <div class="box-head">
                                <?php echo __('Categories') ?>
                            </div>
                            <div class="box-body">
                                <?php include_component('component', 'categoriesSideMenu') ?>
                            </div>
                        </div>
                    </div>
                    <!--// eof: categories //-->
                    <!--// bof: specials //-->
                    <div class="box" id="specials" style="width:215px;">
                        <div class="box-border">
                            <div class="box-head">
                                <a href="<?php echo url_for("/product/specialItem") ?>"><?php echo __('Specials') ?></a>
                            </div>
                            <div class="box-body">
                                <?php include_component('component', 'specialsSideMenu', array('param' => 'will implement for categoryType')) ?>
                            </div>

                        </div>
                    </div>
                    <!--// eof: specials //-->
                </div>
            </td>
            <td id="column-center" valign="top">


                <!-- BOF- BANNER #3 display -->
                <!-- EOF- BANNER #3 display -->


                <div class="column-center-padding">

                    <!--content_center-->


                    <!-- bof breadcrumb -->
                    <!-- eof breadcrumb -->


                    <!-- bof upload alerts -->
                    <!-- eof upload alerts -->


                    <div class="centerColumn" id="accountPassword">
                        <form name="frmAccountPassword" id="frmAccountPassword" action="/member/updatePassword" method="post">
                            <?php if ($sf_flash->has('errorMsg')): ?>
                                <?php echo $sf_flash->get('errorMsg') ?>
                            <?php endif; ?>
                            <h1 id="accountDefaultHeading">Change My Account Password</h1>
                            <fieldset>
                                <legend>My Password</legend>
                                <div class="alert forward">* Required information</div>
                                <br class="clearBoth">


                                <label class="inputLabel" for="oldPassword">Current Password:</label>
                                <input name="oldPassword" id="oldPassword" type="password"
                                       value="<?php echo $oldPassword;?>"><span class="alert">*</span>
                                <br class="clearBoth">
                                <br class="clearBoth">

                                <label class="inputLabel" for="newPassword">New Password:</label>
                                <input name="newPassword" id="newPassword" type="password"
                                       value="<?php echo $newPassword;?>"><span class="alert">*</span>
                                <br class="clearBoth">
                                <br class="clearBoth">

                                <label class="inputLabel" for="confirmPassword">Confirm Password:</label>
                                <input name="confirmPassword" id="confirmPassword" type="password"><span
                                    class="alert">*</span>
                                <br class="clearBoth">
                                <br class="clearBoth">
                            </fieldset>


                            <div class="buttonRow forward">
                                <button id="btnUpdate"><?php echo __('Update') ?></button>
                            </div>
                            <div class="buttonRow back">
                                <a id="btnBack" href="<?php echo url_for("/member/myAccount");?>"><?php echo __('Back') ?></a>
                            </div>
                        </form>
                    </div>

                    <div class="clear"></div>
                    <!--eof content_center-->
                </div>
                <!-- BOF- BANNER #4 display -->
                <!-- EOF- BANNER #4 display -->
            </td>
        </tr>
        </tbody>
    </table>
</div>